<script setup>
import { ref } from 'vue';

// 定义静态订单数据
const orders = ref([
  {
    id: 1,
    scriptName: '神秘古堡',
    appointmentTime: '2025-06-10 14:00',
    status: 'success',
    price: 128
  },
  {
    id: 2,
    scriptName: '星际谜案',
    appointmentTime: '2025-06-15 19:30',
    status: 'pending',
    price: 158
  }
]);
</script>

<template>
  <div class="order-container">
    <h2>我的剧本杀订单</h2>
    <el-table :data="orders" border style="width: 100%">
      <el-table-column prop="id" label="订单ID" width="120" />
      <el-table-column prop="scriptName" label="剧本名称" width="180" />
      <el-table-column prop="appointmentTime" label="预约时间" width="180" />
      <el-table-column prop="status" label="订单状态" width="120">
        <template #default="{ row }">
          <el-tag :type="row.status === 'success' ? 'success' : 'warning'">
            {{ row.status === 'success' ? '预订成功' : '待确认' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="价格（元）" width="100" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="text" size="small">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped lang="scss">
.order-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  background-color: #f9f9f9;

  h2 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
  }
}
</style>